<template>
  <div>
      <h1>Home</h1>
      <router-link to="/about">About</router-link>
      <h1>{{ title }}</h1>
      <h2>{{ cont }}</h2>
      <foo :posts="posts" />
  </div>
</template>

<script>
import axios from 'axios'
import foo from '@/components/foo'

export default {
    name: 'Home',
    components: {foo},
    // 动态页面内容有利于 SEO 或是提升首屏渲染速度时使用 asyncData 请求拿数据
    async asyncData () {
      // 在服务端渲染期间由服务端调用
      // 客户端路由更新之前由客户端调用
      console.log(this) // undefined
      const res = await axios({
        method: 'GET',
        url: "http://localhost:3000/data.json"
      })
      // 返回的对象与 data 返回值合并
      return res.data
    },
    // 如果是非异步数据或者普通数据，则正常初始化到 data 中即可
    data() {
      return {
        cont: 'cont'
      }
    }
}
</script>

<style>

</style>